<template>
  <div id="app" class="reply">
    <v-breadcrumbs :items="items" divider=">"></v-breadcrumbs>
    <v-text-field v-model="title" 
            label="标题" required ></v-text-field>
    <div ref="editor"></div>
    <v-btn @click="submit">发表话题</v-btn>
    <v-alert color="blue"
      :value="respStauts"
      type="success"
    >
      发表成功.
    </v-alert>
  </div>
</template>

<script>
import {restUrl} from '../config/config'
import E from 'wangeditor'

export default {
  data: function() {
    return {
      items: [
        {
          text: '首页',
          disabled: false,
          href: '/#/'
        },
        {
          text: '列表',
          disabled: false,
          href: '/#/forum/1'
        },
        {
          text: '发表',
          disabled: true
        }
      ],
      title: '',
      content: '<h3>vue html5 editor</h3>',
      respStauts: false
    }
  },
  mounted() {
    var editor = new E(this.$refs.editor)
    editor.customConfig.uploadImgServer = '/upload'
    editor.customConfig.onchange = (html) => {
      this.content = html
    }
    editor.create()
  },
  methods: {
    
    submit: function() {
      let topic = {
        title:this.title,
        content: this.content,
        category: this.$route.params.fid
      }
      this.axios.post(restUrl + '/topic/create',topic)
       .then(resp =>{
         if (resp.data.code === 0) {
           this.respStauts = true
         } else {
           this.respStauts = true
         }
       })
    }
  }
}
</script>

<style scoped>
  .reply {
    padding-left: 10px;
    padding-right: 10px;
  }
</style>
